关键字: box-shadow
  • vue+swiper实现背景跟随轮播图切换
    一. 图片变量设置 1.Less: ...
  • css改变滚动条样式
    /* 滚动条整体样式外部 滚动条宽度和高度分别代表横竖滚动条的宽度和高度*/ *::-webkit-scrollbar { width: 16px; height: 16px; } /* 滚动条里面的上下箭头按钮,允许通过点击微调滚 ...
  • 从 Redux 设计理念到源码分析
    前言 Redux 也是我列在 THE LAST TIME 系列中的一篇,由于现在正在着手探究关于我目前正在开发的业务中状态管理的方案。所以,这里打算先从 Redux 中学习学习,从他的状态中取取经。毕竟,成功总是需要站在巨人的肩膀上不是。 ...
  • web前端入门到实战:宣传页项目实战
    编辑器:sublime text3 标注工具:PxCook 切图工具:PS 开发前准备:设计图标注 PxCook 空格键可以上下拖动 大致标注图纸:(可惜不能文字标注和拉参考线) 开发前准备:PS切图 在指定图层上新建一个图层,使用ctr ...
  • web前端入门到实战:CSS实现自适应分隔线的 8 种方法
    1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移1 ...
  • web前端入门到实战:CSS实现开关按钮三例
    我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签,一个checkbox,并在提交表单后获取checkbox值, ...
  • web前端入门到实战:一个标签!纯CSS实现动态晴阴雨雪
    1 引言 本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪。技术关键点就是“单标签”和“纯CSS”。先看下最终效果: 再看看HTML代码: <!-- ...
  • 前端特效的似是而非
    让用户看起来是这样,而非实现起来一定是这样。 写特效时经常被逻辑思维所牵绊,A元素B元素分的太清了,反而麻烦。 最近在网上找了一些自己喜欢例子。 1. effect.gif html结构 ...
  • web前端入门到实战:3步实现小程序第一次打开提示“添加到我的小程序”
    本文例子也以Taro代码为示例,如果你用小程序语言、uni-app等框架也不用担心,因为原理是一样的。 一、理解设计原理 问题的关键在于“如何判断第一次打开”,有两种方法: 1、打开页面后本地存一个flag到session; 2、和服务器交 ...
  • web前端入门到实战:纯CSS画动态彩虹
    效果 效果图如下 实现思路 使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起 after伪元素写投影样式 彩虹和投影都有动画 dom结构 用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式。 <div c ...

暂无数据